<template>
  <div class="userview">
    <div class="leftv">
      <img src="./../../../static/img/userinfo.png" alt="">
      <p class="name">Ying~</p>
      <p class="name2">做一只有理想的程序猿</p>
      <div class="detail1">
        <p>手机号：1182827388</p>
        <p>职务：软件开发</p>
        <p>地址：喜马拉雅星球</p>
        <p>团队：A战队</p>
      </div>
    </div>
    <div class="rightv">
      <el-tabs v-model="activeName" style="line-height: 60px;" size="large">
        <el-tab-pane label="基本资料" name="first" />
        <el-tab-pane label="修改密码" name="second" />
      </el-tabs>
      <div v-if="activeName === 'first'" class="right-f">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入昵称" />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入电话" />
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入职务" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入地址" />
          </el-form-item>
          <el-form-item label="团队">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入您的团队" />
          </el-form-item>
        </el-form>
        <el-button class="btnRed" type="danger" @click="onSubmit">更新基本信息</el-button>
      </div>
      <div v-if="activeName === 'second'" class="right-f">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="旧密码">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入旧密码" />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="form.name" style="width: 280px" placeholder="请输入新密码" />
          </el-form-item>
        </el-form>
        <el-button class="btnRed" style="margin-left: 25px;" type="danger" @click="onSubmit">更新我的密码</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Me',
  components: {},
  data() {
    return {
      activeName: 'first',
      form: {
        name: '',
        phone: '',
        work: '',
        address: '',
        group: ''
      }
    }
  },
  computed: {},
  watch: {
    '$store.state.setting.refresh': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          alert('刷新个人中心页')
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSubmit() {

    }
  }
}
</script>
<style lang="scss" scoped>
.userview{
    display: flex;
    justify-content: space-between;
    .leftv{
        width: 29%;
        background: white;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            background: rgba(230, 210, 216, 0.575);
        }
        .name{
            color: rgba(0,0,0,.85);
            font-size: 20px;
            line-height: 28px;
            height: 28px;
            font-weight: 500;
            margin-bottom: 10px;
        }
        .name2{
            color: rgba(0,0,0,.65);
            font-size: 14px;
            margin-bottom: 30px;
        }
        .detail1{
            width: 100%;
            border-top: 1px solid rgb(231, 231, 231);
            padding-top: 10px;
            p{
              color: rgba(0,0,0,.65);
              font-size: 14px;
              line-height: 32px;
              height: 32px;
            }
        }
    }
    .rightv{
        width: 69%;
        background: white;
        padding: 0px 20px;
        height: 450px;
        .right-f{
            margin-top: 20px;
        }
    }
    .btnRed{
        margin-bottom: 20px;
        margin-left: 40px;
    }
}
</style>
